<template>
	<view class="index">
		<view class="index-top">
			<view class="index-top-img">
				<image @click="introduce" src="/static/image/banner.png" mode=""></image>
			</view>
			<view class="index-centen">
				<view class="index-centen-ul" @click="discounts">
					<view class="index-centen-vip">
						<image src="../../static/image/icon-o.png" mode=""></image>
					</view>
					<view class="index-vip">
						<view class="index-hy">
							<text>会员权益</text>
						</view>
						<view class="index-look">
							<text>点击查看本平台会员专属权益</text>
						</view>
					</view>
					<view class="radius">
						<view class="index-radius">
							<image src="../../static/image/icon-jinru.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
			<view class="index-centen" style="background-image: url(../../static/image/icon-bj.png);">
				<view class="index-centen-ul" @click="merchant">
					<view class="index-centen-vip">
						<image src="../../static/image/index-kpu.png" mode=""></image>
					</view>
					<view class="index-vip">
						<view class="index-hy">
							<text>靠谱商家</text>
						</view>
						<view class="index-look">
							<text>点击查看本平台会员专属权益</text>
						</view>
					</view>
					<view class="radius">
						<view class="index-radius">
							<image src="../../static/image/icon-jinru.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<Classify></Classify>
		<Merchant></Merchant>
	</view>
</template>

<script>
	import Classify from "../../components/index/classify.vue"
	import Merchant from "../../components/index/merchant.vue"
	export default {
		data() {
			return {}

		},

		onLoad() {
			
		},
		
		methods: {
			discounts() {
				uni.navigateTo({
					url: '/pages/index/discounts'
				});
			},
			introduce() {
				uni.navigateTo({
					url: '/pages/public/introduce'
				});
			},
			onNavigationBarButtonTap(e) {
				if (e.float === 'left') {} else if (e.float === 'right') {
					uni.navigateTo({
						url: '/pages/advisory/consult'
					})
				}
			},
			onNavigationBarSearchInputClicked: async function(e) {
				uni.navigateTo({
					url: '/pages/public/search'
				});
			},
			merchant() {
				uni.switchTab({
					url: '/pages/merchant/merchant'
				})
			}
		},
		components: {
			Classify,
			Merchant
		}
	}
</script>

<style lang="less" scoped>
	.index {

		.index-top {
			.index-top-img {
				margin: 0 auto;

				image {
					width: 686rpx;
					height: 256rpx;
					display: block;
					padding: 40rpx 30rpx;
					margin: 0 auto;
				}
			}

			.index-centen {
				background-image: url(../../static/image/index-vip.png);
				background-repeat: no-repeat;
				background-size: 703rpx 151rpx;
				background-position: center;
				display: flex;
				justify-content: space-around;

				.index-centen-ul {
					height: 151rpx;
					display: flex;

					.index-centen-vip {
						image {
							width: 96rpx;
							height: 96rpx;
							margin: 30rpx 20rpx;
						}
					}

					.index-vip {
						width: 400rpx;
						margin: 35rpx 0;

						.index-hy {
							text {
								font-size: 31rpx;
								font-family: Source Han Sans CN;
								font-weight: bold;
								color: #333333;
								display: block;
							}
						}

						.index-look {
							text {
								font-size: 22rpx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								color: #666666;
								white-space: nowrap;
							}
						}
					}

					.radius {
						.index-radius {
							width: 31rpx;
							height: 31rpx;
							border: 1rpx solid #666666;
							border-radius: 50%;
							margin: 60rpx 0 0 30rpx;

							image {
								width: 15rpx;
								height: 17rpx;
								position: absolute;
								margin-top: 8rpx;
								margin-left: 8rpx;
							}
						}
					}

				}
			}
		}

	}
</style>
